<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>辅助分拣系统</title>
  <meta name="viewport" content="width=device-width">
  <style>
    /* 重置所有元素 */
    * {
      padding: 0;
      margin: 0;
      border: 0;
      box-sizing: border-box;
    }

    /* 确保 html 和 body 占满整个视口 */
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: green;
      font-size: 16px;
    }

    /* 其他样式保持不变 */
    #monitor1 {
      position: relative;
      width: 100%;
      height: 100%;
    }

    span {
      font-size: 16px;
      font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
        "Lucida Sans", Arial, sans-serif;
      text-align: right;
      position: absolute;
      color: green;
      display: inline-block;
      word-wrap: break-word;
    }

    table {
      border-collapse: collapse;
    }

    #video {
      position: fixed;
      top: 0;
      left: 0;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: 0;
      transform-origin: top left;
    }

    #error-message {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.8);
      color: red;
      padding: 20px;
      border-radius: 5px;
      display: none;
      z-index: 1000;
    }

    body {
      margin: 0;
      overflow: hidden;
    }
    #template {
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="error-message"></div>
</body>

<script src="render.js"></script>
</html>